<template>
    <view class="main">
        <view class="block">
            <view class="title">可用电池</view>
            <view class="top">
                <Battery :showLightning="false" :percent="93" :showPercent="false" />
                <view class="right">{{ detail?.availableBattery }}块</view>
            </view>
        </view>
        <view class="block">
            <view class="title">正在充电</view>
            <view class="list-box">
                <view class="list-item" v-if="detail?.chargingBatteryList?.length > 0"
                    v-for="(item, index) in detail?.chargingBatteryList" :key="index">
                    <view class="left-item">
                        <Battery :percent="item.currentCapacity" :batteryStatus="false" :showPercent="false" />
                        <view class="number">{{ item.currentCapacity }}%</view>
                        <view class="time">{{ item.duration }}</view>
                    </view>
                    <view class="right">{{ item.bNum }}块</view>
                </view>
                <view class="no" v-else>
                    <!-- <image src="/static/icon/dd.png" mode="widthFix" /> -->
                    <view>暂无电池</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import Battery from '@/components/battery/Battery.vue'
import { onLoad } from '@dcloudio/uni-app';
import { batteryDetail } from '@/api/apiList'
const batteryList = ref([96, 92, 85, 65])

const detail = ref({})
const getDetail = async (stationNo) => {
    let res = await batteryDetail({
        stationNo
    })
    if (res.code == 200) {
        detail.value = res.data
        if (detail.value.chargingBatteryList.length) {
            // 1. 使用 reduce 合并相同 currentCapacity 的数据
            detail.value.chargingBatteryList = detail.value.chargingBatteryList.reduce((acc, curr) => {
                // 查找是否已存在相同 currentCapacity 的条目
                const existingItem = acc.find(item => item.currentCapacity === curr.currentCapacity);

                if (existingItem) {
                    // 如果存在，增加 bNum
                    existingItem.bNum = (existingItem.bNum || 1) + 1;
                    // 合并 batteryID（可选）
                    existingItem.batteryIDs = [...(existingItem.batteryIDs || [existingItem.batteryID]), curr.batteryID];
                    delete existingItem.batteryID; // 移除单独的 batteryID
                } else {
                    // 如果不存在，添加新条目并初始化 bNum
                    acc.push({ ...curr, bNum: 1 });
                }

                return acc;
            }, []);
        }
    }
}

// stationNo
onLoad((option) => {
    getDetail(option.stationNo)
})
</script>

<style lang="scss" scoped>
.main {
    padding: 20px;

    .block:first-child {
        margin-bottom: 40rpx;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .block {
        .title {
            font-size: 25rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .list-box {
            .list-item:last-child {
                margin-bottom: 0;
            }

            .list-item {
                margin-bottom: 20rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-item {
                    display: flex;
                    align-items: center;

                    .number {
                        margin: 0 10rpx;
                    }

                    .number,
                    .time {
                        font-size: 20rpx;
                        font-size: 28rpx;
                    }
                }

                .right-item {
                    font-weight: 900;
                }
            }
        }
    }
}

.no {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 120rpx;

    image {
        width: 100%;
    }
}
</style>